<template>
  <div class="maincontent">
    <el-tabs v-model="tabActiveName" @tab-click="handleTabClick">
      <el-tab-pane name="0">
        <span slot="label"> <i class="el-icon-s-order"></i>&nbsp;待办箱 </span>
      </el-tab-pane>
      <el-tab-pane name="1">
        <span slot="label"> <i class="el-icon-s-claim"></i>&nbsp;已办箱 </span>
      </el-tab-pane>
    </el-tabs>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import { getList, getJobList } from "@/api/projectManage/planningStage.js";
import config, { handleThreePhaseJumpRoute } from "@/config";
import waitDealProject from './component/waitDealProject.vue';
import dealedProject from './component/dealedProject.vue';

export default {
  data() {
    return {
      tabActiveName: "0",
      currentComponent:waitDealProject
    };
  },
  methods: {
    handleTabClick: function(tab) {
      if (tab.name == 0) {
        this.currentComponent = waitDealProject;
      } else {
        this.currentComponent = dealedProject;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.maincontent {
  padding: 30px 40px;
  .lines {
    height: 10px;
    background: rgba(245, 247, 250, 1);
    margin-top: 20px;
  }
}

/deep/ .el-tabs__item {
  height: 60px;
  font-size: 18px;
  line-height: 60px;
}
</style>
